<template>
    <div id="header-content">
        <el-form id="header-query" :inline="true" ref="searchParam" :model="searchParam">
            <el-row>
                <el-col :span="4">
                    <el-form-item label="" label-width="0">
                        <el-date-picker
                            v-model="searchParam.date"
                            type="date"
                            placeholder="选择日期"
                            size="mini"
                            value-format="yyyyMMdd"
                            format="yyyy-MM-dd"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="债券代码(名称)" prop="stockCode" label-width="120px">
                        <el-select
                            v-model="searchParam.stockCode"
                            filterable
                            clearable
                            remote
                            :remote-method="getStockCodeList"
                            @clear="getStockCodeList('')"
                            @visible-change="handleStockVisibleChange"
                            :loading="selectLoadingStock"
                            size="mini"
                        >
                            <el-option
                                v-for="item in stockCodes"
                                :key="item.dictKey"
                                :label="item.dictKey + ' ' + item.dictKeyName"
                                :value="item.dictKey"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="发行人代码(名称)" prop="issueCode" label-width="130px">
                        <el-select
                            v-model="searchParam.issueCode"
                            filterable
                            clearable
                            remote
                            :remote-method="getIssueCodeList"
                            @clear="getIssueCodeList('')"
                            @visible-change="handleIssueVisibleChange"
                            :loading="selectLoadingIssue"
                            size="mini"
                        >
                            <el-option
                                v-for="item in issueCodes"
                                :key="item.dictKey"
                                :label="item.dictKey + ' ' + item.dictKeyName"
                                :value="item.dictKeyName"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" size="mini" @click="handleButton('reset')">重置</el-button>
                    <el-button type="primary" size="mini" @click="handleButton('search')">查询</el-button>
                    <el-button type="primary" size="mini" @click="handleButton('loadout')">导出</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator';
import XEUtils from 'xe-utils';

@Component({ name: 'QuotaQuery', components: {} })
export default class QuotaQuery extends Vue {
    searchParam: any = {
        date: XEUtils.toDateString(new Date(), 'yyyyMMdd'),
        stockCode: '',
        issueCode: '',
    };

    selectLoadingStock: boolean = false;

    selectLoadingIssue: boolean = false;

    issueCodes: any[] = []; // 产品序号下拉值

    stockCodes: any[] = []; // 证券代码

    @Watch('searchParam', { deep: true })
    handleSearchParam(): void {
        this.$emit('comReturn', {
            searchParam: this.searchParam,
        });
    }

    @Prop() tabName: string;

    getStockCodeList(e: string) {
        this.selectLoadingStock = true;
        let url =
            this.tabName == 'convertible'
                ? '/maxWealth/dict/creditRating/convertible/stock/select'
                : '/maxWealth/dict/creditRating/common/stock/select';
        return new Promise((resolve, reject) => {
            this.$axios
                .post(url, {
                    dictKey: e,
                    dictKeyName: e,
                })
                .then((res: any) => {
                    this.stockCodes = res;
                    this.selectLoadingStock = false;
                    resolve(res);
                })
                .catch(err => {
                    this.selectLoadingStock = false;
                    reject(err);
                });
        });
    }

    getIssueCodeList(e: string) {
        this.selectLoadingIssue = true;
        let url =
            this.tabName == 'convertible'
                ? '/maxWealth/dict/creditRating/convertible/issue/select'
                : '/maxWealth/dict/creditRating/common/issue/select';
        return new Promise((resolve, reject) => {
            this.$axios
                .post(url, {
                    dictKey: e,
                    dictkeyName: e,
                })
                .then((res: any) => {
                    this.issueCodes = res;
                    this.selectLoadingIssue = false;
                    resolve(res);
                })
                .catch(err => {
                    this.selectLoadingIssue = false;
                    reject(err);
                });
        });
    }

    async handleButton(type: string) {
        if (type == 'reset') {
            await this.getStockCodeList('');
            (this.$refs['searchParam'] as any).resetFields();
            this.searchParam.date = XEUtils.toDateString(new Date(), 'yyyyMMdd');
        } else {
            this.$emit('handleButton', type);
        }
    }

    isFirstStockVisible: boolean = true; // 首次点击债券

    isFirstIssueVisible: boolean = true; // 首次使用发行人

    // 打开下拉框
    async handleStockVisibleChange(isShow: boolean) {
        if (isShow && this.isFirstStockVisible) {
            await this.getStockCodeList('');
            this.isFirstStockVisible = false;
        }
        if (!isShow && this.stockCodes.length < 1) {
            await this.getStockCodeList('');
        }
    }

    async handleIssueVisibleChange(isShow: boolean) {
        if (isShow && this.isFirstIssueVisible) {
            await this.getIssueCodeList('');
            this.isFirstIssueVisible = false;
        }
        if (!isShow && this.issueCodes.length < 1) {
            await this.getIssueCodeList('');
        }
    }
}
</script>
<style lang="scss" scoped>
#header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px 15px 0;

    #header-query {
        height: 42px;
        line-height: 42px;
        /deep/ .el-form-item {
            margin-bottom: 4px;
            display: flex;
            .el-form-item__label {
                color: black;
                padding-right: 2px;
            }
        }
    }
}
/deep/ .el-input__suffix {
    line-height: 40px;
}
</style>
